<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>与我联系</title>

    <!-- Bootstrap core CSS -->
    <link href="/front_res/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom fonts for this template -->
    <link href="/front_res/vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href='https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic' rel='stylesheet'
          type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800'
          rel='stylesheet' type='text/css'>

    <!-- Custom styles for this template -->
    <link href="/front_res/css/clean-blog.min.css" rel="stylesheet">

</head>

<body>

<nav th:include="common/top_index"></nav>


<!-- Page Header -->
<header class="masthead" style="background-image: url('/front_res/img/contact-bg.jpg')">
    <div class="overlay"></div>
    <div class="container">
        <div class="row">
            <div class="col-lg-8 col-md-10 mx-auto">
                <div class="page-heading">
                    <h1>与我联系</h1>
                    <span class="subheading">如有问题，请留下联系方式，在本页面给我留言吧。</span>
                </div>
            </div>
        </div>
    </div>
</header>

<!-- Main Content -->
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
            <p>想和我取得联系？ 填写下面的信息给我发消息，我会尽快回复你！</p>
            <!-- Contact Form - Enter your email address on line 19 of the mail/contact_me.php file to make this form work. -->
            <!-- WARNING: Some web hosts do not allow emails to be sent through forms to admincommon mail hosts like Gmail or Yahoo. It's recommended that you use a private domain email address! -->
            <!-- To use the contact form, your site must be on a live web host with PHP! The form will not work locally! -->
            <form name="sentMessage" id="sentMessage">
                <div class="control-group">
                    <div class="form-group floating-label-form-group controls">
                        <label>姓名</label>
                        <input type="text" class="form-control" placeholder="Name" name="sender" required
                               data-validation-required-message="Please enter your name.">
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="control-group">
                    <div class="form-group floating-label-form-group controls">
                        <label>邮箱</label>
                        <input type="email" class="form-control" placeholder="Email Address" name="email" required
                               data-validation-required-message="Please enter your email address.">
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="control-group">
                    <div class="form-group col-xs-12 floating-label-form-group controls">
                        <label>手机</label>
                        <input type="tel" class="form-control" placeholder="Phone Number" name="phone" required
                               data-validation-required-message="Please enter your phone number.">
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <div class="control-group">
                    <div class="form-group floating-label-form-group controls">
                        <label>信息</label>
                        <textarea rows="5" class="form-control" placeholder="Message" name="message" required
                                  data-validation-required-message="Please enter a message."></textarea>
                        <p class="help-block text-danger"></p>
                    </div>
                </div>
                <br>
                <div id="success"></div>
                <div class="form-group">
                    <input type="button" class="btn btn-primary" id="sendMessageButton" value="Send"
                           onclick="sendmsg()">
                </div>
            </form>
        </div>
    </div>
</div>

<hr>

<!-- Footer -->
<footer th:include="common/footer"></footer>

<!-- Bootstrap core JavaScript -->
<script src="/front_res/vendor/jquery/jquery.min.js"></script>
<script src="/front_res/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Contact Form JavaScript -->
<script src="/front_res/js/jqBootstrapValidation.js"></script>
<!--<script src="/front_res/js/contact_me.js"></script>-->

<!-- Custom scripts for this template -->
<script src="/front_res/js/clean-blog.min.js"></script>
<script type="text/javascript" src="/valires/js/plugins/sweetalert.min.js"></script>

<script type="text/javascript">
    function sendmsg() {
        var form = new FormData(document.getElementById("sentMessage"));
        var result;
        $.ajax({
            url: "/send_msg",
            type: "post",
            data: form,
            processData: false,
            contentType: false,
            success: function (data) {
                result = data;
                if (result['msgid'] != null){
                    //alert("succuss!");
                    console.debug(result['msgid']);
                    alert("信息已发送，请等待回信");
                }
                //
            },
            error: function (e) {
                alert("错误！！");
            }
        });



    }

</script>

</body>

</html>
